CSS Selectors

SAMPLE CODE

There are 4 basic style selectors

1)Class selectors - The most common used.  You can use it to format more than 1 object, you can use it many times on the same page.  Class selectors use a dot in front of the class name.
  a) .container {   /*pertains to all elements that belong to the container class */
	     width: 100%;
	     max-width: 800px;
	     min-width: 320px;
	     background: #000000;
      }
			
			p.container {   /*pertains to all paragraph elements that belong to the container class */
	     width: 100%;
	     max-width: 800px;
	     min-width: 320px;
	     background: #000000;
      }
	b) <div class="container">
	     ...
			 ...
			 </div>
	
2)Type selectors - Used to modify existing tags.  When you use one of the tags below, it assumes the formatting defined.
  a) h1, h2, h3, p {
	    margin-top: 0;
			padding-right: 15px;
			color: #CCC;
			}
			
3) ID Selectors - Can be used only once per page. Id selectors should match only one element in a page.  Id selectors use a hash mark(#) in fromt of the id. 
  a) #id1{   /* selects any element with the id id1 */
	        font-family: "times New Roman", Times, serif;
	        font-size: 1.2em;
	        color: yellow;	
      }
			
			p#id1{   /* selects paragraph elements with the id id1 */
	        font-family: "times New Roman", Times, serif;
	        font-size: 1.2em;
	        color: yellow;	
      }
			
	b) <div id="id1">
	    <p>test</p>
	   </div>
	
4)Compound selectors - allows you to combine styles
  a) .container .content ol {
	      font-family: arial, sans-serif;
				color: #000;
				}